<template>
	
	<div class="upload-content-wrap">
		
		
		<div class="img-list">
			<el-row :gutter="10">

				<!-- 图片容器 -->
				<el-col 
					v-if="uploadImgList.length>0" 
					:sm="12" 
					:md="8"
					:lg="6"
					:xl="4" 
					v-for="(item,key) in uploadImgList" 
					:key="key"
				>

					<div class="img-li-box">
						<img class="img-li-b--url" :src="item.url">
						<!-- 删除icon -->
						<div class="img-li-b--delete">
							<i @click="handleFileRemove(uploadImgList,key)" class="el-icon-delete"></i>
						</div>
					</div>
				</el-col>

				<!-- 上传进度 -->
				<el-col 
					:sm="12" 
					:md="8"
					:lg="6"
					:xl="4" 
				>
					<div v-if="!pass && progress !== 0" class="img-li-box img-li-b--progress">
						<el-progress type="circle" :percentage="progress" :status.sync="proStatus"></el-progress>
					</div>
				</el-col>

				<!-- 上传组件 -->
				<el-col
					:sm="12" 
					:md="8"
					:lg="6"
					:xl="4" 
				>
					<div class="img-upload-field">
						<el-upload
							with-credentials
							class="img-upload-input"
							:action="uploadUrl"
							:data="uploadImgData"
							accept="image/*"
							list-type="picture-card"
							:show-file-list="false"
							multiple
							:headers="uploadHeaders"
							:on-change="uploadChange"
							:on-success="uploadSuccess"
							:on-progress="uploadOnProgress"
                  				ref="uploadImg"
						>
							<el-button ref="uploadImgBtn" id="uploadImgBtn" size="small" type="primary" icon="el-icon-upload" circle></el-button>
						</el-upload>
					</div>
				</el-col>
			</el-row>
		</div>

	</div>
	
</template>

<script>
import { baseUrl } from '@/config/env';
import { getToken } from '@/utils/auth';

//上传图片的url
const uploadUrl = baseUrl+'/rest/common/upload';
//获取图片的url
const imgPrefix = baseUrl+'/rest/common/preview/';

export default{
	props:{
		defaultSelect:{
			type:Array,
			default:function(){
				return []
			}
		}
	},
	data(){
		return{
			//图片上传地址
			uploadUrl:uploadUrl,
			//服务器获取图片前缀
            imgPrefix:imgPrefix,
			//token头信息
            uploadHeaders:{'Authorization':'Bearer ' + getToken()},
			//图片上传的参数
            uploadImgData:{form:'detail'},
			//图片列表
			uploadImgList:[],
			//是否上传成功
            pass:null,
			//上传进度
			progress:0,
		}
	},
	mounted(){
		this.convertImgs(this.defaultSelect)
	},
	watch:{
		defaultSelect(val){
			this.convertImgs(val)
		}
	},
	computed:{
		//上传状态
		proStatus(){
			if(this.pass){
				return 'success'
			}else if(this.pass === false){
				return 'exception';
			}else{
				return 'warning'
			}
		}
	},
	methods:{
		//组装默认图片
		convertImgs(arr){
			var len = arr.length;
			
			var temp = [];
			for(var i=0;i<len;i++){
				var item = {};
				var imgUrl = this.imgPrefix + arr[i];
				item["url"] = imgUrl;
				item["fileId"] = arr[i];
				item["name"] = arr[i];
			
				temp.push(item)
			}

			this.uploadImgList = temp;
		},
		//删除已上传的图片
		handleFileRemove(list,index){
			list.splice(index,1);
			this.$emit('success',this.uploadImgList)
		},
		//图片上传状态改变
		uploadChange(file,fileList){
			if(file.status === 'ready'){
				this.pass = null;
            	this.progress = 0;
			}else if(file.status === 'fail'){
				this.$ipcTips.error('图片上传失败，请重新上传')
			}
		},
		//图片上传进度
		uploadOnProgress(e,file){
			this.progress = Math.floor(e.percent);
		},
		//图片上传成功
		uploadSuccess(e,file,fileList){
			console.log("%c上传图片返回结果","background:#f00;color:#fff")
			console.log(e);

			this.pass = true;
			var imgUrl = this.imgPrefix + e.data.fileId;
			var fileId = e.data.fileId;
			this.uploadImgList.push({
            	url:imgUrl,
            	selected:false,
            	fileId:fileId,
            	name:fileId
          	})

			this.$emit('success',this.uploadImgList)
		}
	}
}

</script>


<style>

.upload-content-wrap .el-upload--picture-card{
	width: 100%;
}

#uploadImgBtn i{
	color: #fff;
}


</style>


<style lang="scss" scoped>


.img-list {
  	overflow: hidden;
  	width: 100%;
  	// 文件列表
  	.img-li-box {
      	float: left;
      	text-align: left;
      	position: relative;
      	display: inline-block;
      	width: 100%;
      	height: 150px;
      	padding: 5px;
      	margin-bottom: 10px;
      	border: 1px solid #d1dbe5;
      	border-radius: 4px;
      	transition: all .3s;
      	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
      	// 图片
      	.img-li-b--url {
          	display: block;
          	width: 100%;
          	height: 110px;
          	margin: 0 auto;
          	border-radius: 4px;
      	}
      	// 底部
      	.img-li-b--bottom {
          	margin-top: 10px;
          	// 名称
          	.img-li-b--name {
              	width: 90%;
              	text-overflow: ellipsis;
              	overflow: hidden;
              	height: 25px;
              	line-height: 25px;
          	}
      	}
      	// 删除按钮
      	.img-li-b--delete {
          	position: absolute;
          	bottom: 0px;
          	right: 10px;
          	color: #8492a6;
          	cursor: pointer;
          	font-size: 1.1em;
      	}
      	// 放大遮罩层
      	.img-li-b--layer {
          	position: absolute;
          	left: 0;
          	right: 0;
          	top: 0;
          	height: 200px;
          	color: #fff;
          	text-align: center;
          	z-index: 5;
          	background-color: rgba(0, 0, 0, .4);
          	// 放大按钮
          	i {
              	font-size: 1.6em;
              	margin-top: 80px;
          	}
      	}
      	.img-li-b--delete,
      	.img-li-b--layer {
          	opacity: 0;
          	transition: all .3s;
      	}
      	// 悬浮可见删除 or 放大按钮
      	&:hover {
          	.img-li-b--delete,
          	.img-li-b--layer {
              	opacity: 1;
	        }
	    }
      	// 上传进度
      	&.img-li-b--progress {
          	text-align: center;
          	padding-top: 20px;
      	}
  	}
    // 上传按钮
    .img-upload-field {
        width: 100%;
        height: 180px;
        display: table;
        text-align: center;
        .img-upload-input{
            width: 100%;
            height: 100%;
            display: table-cell;
            
        }
    }
}
</style>